<template>
  <div>
    <Row class="bench_search">
      <Col span="5" offset="1">
        <span>姓名：</span>
        <Input style="width: 70%;" v-model="name"/>
      </Col>
      <Col span="6">
        <span>手机：</span>
        <Input style="width: 70%;" v-model="phone" />
      </Col>
      <Button type="info"  @click="select" ><Icon type="ios-search" /> 搜索</Button>
      <Button type="info"  style="margin-left: 3%" @click="dakai"><Icon type="ios-search" /> 添加</Button>
    </Row>
    <Table border :columns="columns12" :data="data6" style="margin-top: 30px">
      <template slot-scope="{ row }" slot="name">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">详情</Button>
        <Button type="primary" size="small" style="margin-right: 5px" @click="bianji(row)">编辑</Button>
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
    <Page :total="100" style="float: right" />
    <Modal
      width="700px"
      v-model="modal1"
      title="添加信息"
      @on-ok="ok">
      <Row class="rowone">
        <Col span="24" offset="1" >
          <span style="margin-left: -11px">志愿者编号：</span>
          <Input style="width: 80%;" v-model="num" />
        </Col>
      </Row>
      <Row class="rowone">
        <Col span="10" offset="2">
          <span>姓名：</span>
          <Input style="width: 70%;" v-model="name1" />
        </Col>
        <Col span="10" offset="2">
          <span>性别：</span>
          <Input style="width: 70%;" v-model="sex" />
        </Col>
      </Row>
      <Row class="rowone">
        <Col span="10" offset="2">
          <span>年龄：</span>
          <Input style="width: 70%;" v-model="age" />
        </Col>
        <Col span="10" offset="2">
          <span>手机：</span>
          <Input style="width: 70%;" v-model="phone1" />
        </Col>
      </Row>
      <Row class="rowone">
        <Col span="10" offset="2" >
          <span>电话：</span>
          <Input style="width: 70%;" v-model="tel" />
        </Col>
        <Col span="10" offset="2">
          <span>邮箱：</span>
          <Input style="width: 70%;" v-model="email" />
        </Col>
      </Row>
      <Row class="rowone">
        <Col span="10" offset="2">
          <span style="margin-left: -24px">今年时长：</span>
          <Input style="width: 70%;" v-model="todayyear" />
        </Col>
        <Col span="10" offset="2">
          <span style="margin-left: -24px">去年时长：</span>
          <Input style="width: 70%;" v-model="lastyear" />
        </Col>
      </Row>
      <Row class="rowone">
        <Col span="10" offset="2">
          <span style="margin-left: -12px">总时长：</span>
          <Input style="width: 70%;" v-model="price" />
        </Col>
      </Row>
    </Modal>

    <Modal
      width="700px"
      v-model="modal2"
      title="添加信息"
      @on-ok="ok1">
      <Row class="rowone">
        <Col span="24" offset="1" >
          <span style="margin-left: -11px">志愿者编号：</span>
          <Input style="width: 80%;" v-model="num" />
        </Col>
      </Row>
      <Row class="rowone">
        <Col span="10" offset="2">
          <span>姓名：</span>
          <Input style="width: 70%;" v-model="name1" />
        </Col>
        <Col span="10" offset="2">
          <span>性别：</span>
          <Input style="width: 70%;" v-model="sex" />
        </Col>
      </Row>
      <Row class="rowone">
        <Col span="10" offset="2">
          <span>年龄：</span>
          <Input style="width: 70%;" v-model="age" />
        </Col>
        <Col span="10" offset="2">
          <span>手机：</span>
          <Input style="width: 70%;" v-model="phone1" />
        </Col>
      </Row>
      <Row class="rowone">
        <Col span="10" offset="2" >
          <span>电话：</span>
          <Input style="width: 70%;" v-model="tel" />
        </Col>
        <Col span="10" offset="2">
          <span>邮箱：</span>
          <Input style="width: 70%;" v-model="email" />
        </Col>
      </Row>
      <Row class="rowone">
        <Col span="10" offset="2">
          <span style="margin-left: -24px">今年时长：</span>
          <Input style="width: 70%;" v-model="todayyear" />
        </Col>
        <Col span="10" offset="2">
          <span style="margin-left: -24px">去年时长：</span>
          <Input style="width: 70%;" v-model="lastyear" />
        </Col>
      </Row>
      <Row class="rowone">
        <Col span="10" offset="2">
          <span style="margin-left: -12px">总时长：</span>
          <Input style="width: 70%;" v-model="price" />
        </Col>
      </Row>
    </Modal>

  </div>
</template>

<script>
export default {
  data () {
    return {
      modal1: false,
      modal2: false,
      num: '',
      name: '',
      name1: '',
      sex: '',
      age: '',
      todayyear: 0,
      lastyear: 0,
      tel: '',
      phone: '',
      phone1: '',
      email: '',
      timelong: 0,
      columns12: [
        {
          title: '序号',
          type: 'index',
          width: 100
        },
        {
          title: '志愿者编号',
          key: 'num'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '性别',
          key: 'sex'
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '手机',
          key: 'phone'
        },
        {
          title: '操作',
          slot: 'action',
          width: 250,
          align: 'center'
        }
      ],
      data1: [],
      data2: [],
      aa: '',
      data0: {},
      data6: [
        {
          num: '1',
          name: '周正',
          sex: '男',
          age: '30',
          timelong: '45',
          todayyear: '15',
          lastyear: '30',
          tel: '024-512369854',
          phone: '15896365478',
          email: '12543552@163.com'
        },
        {
          num: '2',
          name: '吴迪',
          sex: '女',
          age: '19',
          timelong: '100',
          todayyear: '45',
          lastyear: '55',
          tel: '024-598635784',
          phone: '15898965474',
          email: 'qwd98@163.com'
        },
        {
          num: '3',
          name: '郑和',
          sex: '50',
          age: '男',
          timelong: '60',
          todayyear: '30',
          lastyear: '30',
          tel: '0245-36984521',
          phone: '13069874562',
          email: 'yrre@163.com'
        },
        {
          num: '4',
          name: '王鹏',
          sex: '男',
          age: '28',
          timelong: '200',
          todayyear: '100',
          lastyear: '100',
          tel: '0245-9846632',
          phone: '1306987463',
          email: 'sdgdds@163.com'
        },
        {
          num: '5',
          name: '王鹏飞',
          sex: '男',
          age: '38',
          timelong: '200',
          todayyear: '100',
          lastyear: '100',
          tel: '0245-98463699',
          phone: '1306980000',
          email: 'etertdsfds@163.com'
        },
        {
          num: '6',
          name: '冯斌',
          sex: '男',
          age: '28',
          timelong: '300',
          todayyear: '200',
          lastyear: '100',
          tel: '0245-9846632',
          phone: '1506987463',
          email: 'sfdsfd@163.com'
        },
        {
          num: '7',
          name: '陈有亮',
          sex: '男',
          age: '18',
          timelong: '100',
          todayyear: '50',
          lastyear: '50',
          tel: '0245-1046632',
          phone: '1406987463',
          email: 'qqqqqqqq@163.com'
        }
      ]
    }
  },
  computed: {
    price () {
      var tmp = 0
      let _this = this
      if (this.todayyear !== '' && this.lastyear !== '') {
        tmp = parseInt(this.todayyear) + parseInt(this.lastyear)
        _this.timelong = tmp
      }
      return tmp
    }
  },
  methods: {
    ok1 () {
      this.data0.name = this.name1
      this.data0.sex = this.sex
      this.data0.age = this.age
      this.data0.todayyear = this.todayyear
      this.data0.lastyear = this.lastyear
      this.data0.phone = this.phone1
      this.data0.tel = this.tel
      this.data0.email = this.email
      this.data0.timelong = this.timelong
    },
    bianji (row) {
      this.data0 = row
      this.modal2 = true
      this.num = row.num
      this.name1 = row.name
      this.sex = row.sex
      this.age = row.age
      this.todayyear = row.todayyear
      this.lastyear = row.lastyear
      this.phone1 = row.phone
      this.tel = row.tel
      this.email = row.email
    },
    dakai () {
      this.modal1 = true
      this.num = Math.floor(Math.random() * (10000000000))
      this.name1 = ''
      this.phone1 = ''
      this.sex = ''
      this.age = ''
      this.timelong = ''
      this.todayyear = ''
      this.lastyear = ''
      this.tel = ''
      this.phone = ''
      this.email = ''
    },
    ok () {
      let a = {
        num: this.num,
        name: this.name1,
        sex: this.sex,
        age: this.age,
        todayyear: this.todayyear,
        lastyear: this.lastyear,
        tel: this.tel,
        phone: this.phone1,
        email: this.email,
        timelong: this.timelong
      }
      this.data2.push(a)
    },
    select () {
      this.data1 = []
      this.data6 = this.data2
      if (this.name !== undefined && this.name !== '') {
        this.data6.filter(item => {
          if (item.name.indexOf(this.name) !== -1) {
            this.data1.push(item)
          }
          this.data6 = this.data1
        })
      } else if (this.phone !== undefined && this.phone !== '') {
        this.data6.filter(item => {
          if (item.phone.indexOf(this.phone) !== -1) {
            this.data1.push(item)
          }
          this.data6 = this.data1
        })
      } else if ((this.name !== undefined && this.name !== '') && (this.phone !== undefined && this.phone !== '')) {
        this.data6.filter(item => {
          if (item.name === this.name || item.phone === this.phone) {
            this.data1.push(item)
          }
          this.data6 = this.data1
        })
      } else {
        this.data6 = this.data2
      }
    },
    show (index) {
      this.$Modal.info({
        title: '详细信息',
        content: `志愿者编号：${this.data6[index].num}<br>姓名：${this.data6[index].name}<br>性别：${this.data6[index].sex}<br>
        年龄：${this.data6[index].age}<br>总时长：${this.data6[index].timelong}<br>今年时长：${this.data6[index].todayyear}<br>
        去年时长：${this.data6[index].lastyear}<br>电话：${this.data6[index].tel}<br>手机：${this.data6[index].phone}<br>邮箱：${this.data6[index].email}<br>`
      })
    },
    remove (index) {
      this.data6.splice(index, 1)
    }
  },
  mounted () {
    this.data2 = this.data6
  }

}
</script>

<style scoped>
  .rowone{
    padding: 10px;
  }
</style>
